<template>
    <div class="password-container">
        <div class="toolbar mb-[30px]">
            <t-card>
                <t-row>
                    <t-col :span="6">
                        <t-form layout="inline" labelWidth="20">
                            <t-form-item label="分类" name="type">
                                <t-select :keys="passwordTypeKeys" :options="passwordTypeList"
                                    v-model="passwordTypeInfo.type" filterable placeholder="请选择密码分类"
                                    :loading="loadingStore.getTableLoading" />
                            </t-form-item>
                            <t-form-item label="名称" name="siteName">
                                <t-input v-model="passwordTypeInfo.siteName"></t-input>
                            </t-form-item>
                            <t-form-item>
                                <t-button>查询</t-button>
                            </t-form-item>

                        </t-form>
                    </t-col>
                    <t-col :span="3"></t-col>
                    <t-col :span="3">
                        <div class="add-button">
                            <t-button theme="primary" @click="showFormHandle">
                                <template #icon><t-icon name="add" /></template>
                                新增密码
                            </t-button>
                        </div>
                    </t-col>
                </t-row>
            </t-card>
        </div>
        <div class="table-box">
            <t-card>
                <t-table :loading="loadingStore.getTableLoading" row-key="id" :data="tableData"
                    :columns="tableDataColumns" :stripe="true" :bordered="false" :hover="true" table-layout="auto"
                    size="medium" :pagination="tablePagination" :show-header="true" cell-empty-content="-" lazy-load
                    :onPageChange="changeTablePage" />
            </t-card>
        </div>
    </div>
    <div class="form-box">
        <t-dialog v-model:visible="showForm" width="55%" :confirm-on-enter="false" :closeOnOverlayClick="false"
            :on-close="close" :on-confirm="onConfirmAnother" :header="formTitle">
            <t-form>
                <t-form-item label="状态">
                    <t-radio-group v-model="formData.content.status">
                        <t-radio-button :value="0">有效</t-radio-button>
                        <t-radio-button :value="1">失效</t-radio-button>
                    </t-radio-group>
                </t-form-item>
                <t-form-item label="密码分类">
                    <t-select v-model="formData.content.type" :keys="passwordTypeKeys" :options="passwordTypeList"
                        placeholder="请选择密码所属分类" clearable filterable></t-select>
                </t-form-item>
                <t-form-item label="站点/APP名称">
                    <t-input v-model="formData.content.appName" placeholder="请输入站点/APP名称" />
                </t-form-item>
                <t-form-item label="站点URL地址">
                    <t-input v-model="formData.content.appUrl" placeholder="请输入应用URL地址" />
                </t-form-item>
                <t-form-item label="账号">
                    <t-input v-model="formData.content.account" placeholder="请输入登录账号" />
                </t-form-item>
                <t-form-item label="密码">
                    <t-input v-model="formData.content.password" placeholder="请输入登录密码" />
                </t-form-item>
                <t-form-item label="邮箱">
                    <t-input v-model="formData.content.email" placeholder="请输入邮箱号码" />
                </t-form-item>
                <t-form-item label="手机号码">
                    <t-input v-model="formData.content.phone" placeholder="请输入手机号码" />
                </t-form-item>
                <t-form-item label="备注信息">
                    <wangEditor ref="passwordRemarkRef" :initial-content="formData.content.remark" />
                </t-form-item>
            </t-form>
        </t-dialog>
    </div>
</template>

<script setup lang="tsx">
import { reactive } from 'vue';
import { useLoading } from '~/store/manager/loading';
import wangEditor from '@/components/wangEditor/index.vue'
import { MessagePlugin } from 'tdesign-vue-next';


// 定义布局 
definePageMeta({
    layout: 'manager'
})

// 使用store
const loadingStore = useLoading();

// 密码类型key
const passwordTypeKeys = {
    value: 'id',
    label: 'title'
};
// 密码类型选择框
const passwordTypeList = ref([]);
// 选择的密码类型
const passwordTypeInfo = reactive({
    type: null,
    siteName: ''
});
// 搜索分类
const searchPasswordTypeMethod = () => {

}
// 获取密码类型列表
const getPasswordTypeList = () => {
    query_password_type({ flag: 'select' }).then((res) => {
        passwordTypeList.value = res.data;
    }).catch((err) => {
        console.log(err.message);
    })
}

// 表格数据
const tableData = ref([]);
// 表格显示列
const tableDataColumns = [
    {
        colKey: 'id',
        title: '序号'
    },
    {
        colKey: 'type',
        title: '分类'
    },
    {
        colKey: 'account',
        title: '账号'
    },
    {
        colKey: 'opreate',
        title: '操作',
        cell: (h, row) => {
            return (
                <div class="opreate">
                    <t-button>查看详情</t-button>
                </div>
            );
        }
    }
];
// 表格分页信息
const tablePagination = reactive({
    defaultCurrent: 1,
    defaultPageSize: 10,
    total: 0
});
// 表格分页切换
const changeTablePage = (pageInfo: any, newData: any) => {

}

// 默认获取全部数据
const getPasswordTableData = () => {

}

// 是否显示编辑框
const showForm = ref(false);
// 编辑框标题
const formTitle = ref("新增");
// 点击
const showFormHandle = () => {
    showForm.value = true;
}
// 密码备注信息
const passwordRemarkRef = ref(null);
// 表单数据
const formData = reactive({
    content: {
        flag: 'create',
        type: null,
        status: 0,
        email: '',
        appName: '',
        appUrl: '',
        account: '',
        password: '',
        remark: ''
    }
});
// 是否新增表单
const createForm = ref(true);
// 重置页面所有信息
const resetForm = () => {
    // 隐藏表单
    showForm.value = false;
    createForm.value = true;
    formTitle.value = "新增";
    formData.content.flag = 'create';
    formData.content.type = null;
    formData.content.status = 0;
    formData.content.appName = '';
    formData.content.appUrl = '';
    formData.content.account = '';
    formData.content.password = '';
    formData.content.email = '';
    formData.content.phone = '';
    formData.content.remark = ''
}
// 初始化页面信息
const __initialize = () => {
    resetForm(); // 重置表单
    getPasswordTypeList(); // 获取密码类型
    getPasswordTableData(); // 获取密码表格列表数据
}
// 关闭dialog
const close = () => {
    // 重置表单
    resetForm();
}
// 确认新增
const onConfirmAnother = () => {
    if(createForm.value) { // 新增
        formData.content.flag = 'create';
    }else{ // 修改
        formData.content.flag = 'update';
    }
    formData.content.remark = passwordRemarkRef.value.valueHtml;
    create_tools_password(formData.content).then((res) => {
        MessagePlugin.success({
            content: res.message
        });
        // 刷新页面
        __initialize();
    }).catch((err) => {
        console.log(err.message);
    })
}
onMounted(() => {
    __initialize();
})
</script>

<style scoped></style>